<template>
  <view>
    <m-top :autoBack="true" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight">
      <view class="c333 font32 fw500">大会详情</view>
    </m-top>

    <m-container :top="glTop">
      <view class="mgt32 pdv40">
        <u-swiper :list="list" height="300rpx"></u-swiper>
        <!--  -->
        <view class="mgt20 flex align-center text-card">
          <view class="font36 text-ell c333 fw500">{{ detail.tmi_name }} </view>
          <view
            class="btn mglauto c481 font28"
            v-if="detail.isRegister || (!detail.isRegister && detail.tmi_is_open != 0)"
            @click="
              () => {
                if (!detail.isRegister) {
                  $u.route({
                    url: '/pages-mine/post/index',
                    params: {
                      mId: detail.tmi_id,
                    },
                  });
                }
              }
            "
          >
            {{ detail.isRegister ? "已报名" : "报名" }}
          </view>
        </view>

        <!--  -->
        <view class="mgt20">
          <panel-infocard :option="detail"></panel-infocard>
        </view>

        <!--  -->
        <view class="mgt20">
          <m-tabs :list="tabs" :current="tabIndex" @change="tabChangeHandler"></m-tabs>
        </view>

        <!--  -->
        <view class="mgt30">
          <panel-process v-if="tabIndex === 0" :options="scheduleInfo"></panel-process>
          <m-bbs :options="forumList" v-else-if="tabIndex === 1"></m-bbs>
          <panel-guest v-if="tabIndex === 2" :options="guestList"></panel-guest>
        </view>
      </view>
      <view class="mgt30 news-box">
        <panel-news v-if="tabIndex === 3" :options="newsList"></panel-news>
      </view>
    </m-container>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelInfocard from "./components/card-info.vue";
import PanelProcess from "./components/card-process.vue";
import PanelGuest from "./components/card-guest.vue";
import PanelNews from "./components/card-news.vue";
import {
  getMettingDetailApi,
  getForumListApi,
  getMettingDetailPersonApi,
  getScheduleInfoApi,
  getMeetingNewsApi,
} from "@/api/modules/homepage.js";
export default {
  mixins: [GlTopMixin],
  components: { PanelInfocard, PanelProcess, PanelGuest, PanelNews },
  data() {
    return {
      list: ["https://zgq-icu-2002-1313043931.cos.ap-shanghai.myqcloud.com/yaxin/%E7%BB%84%20225%402x.png"],
      tabIndex: 0,
      forumList: [], // 论坛列表
      guestList: [], // 嘉宾列表
      detail: {},
      scheduleInfo: [],
      newsList: [],
      tabs: [
        {
          name: "大会日程",
        },
        {
          name: "分论坛",
        },
        {
          name: "演讲嘉宾",
        },
        {
          name: "大会资讯",
        },
      ],
    };
  },

  async onLoad(options) {
    this.mId = options.mId;
    this.init()
    this.getScheduleInfo();
  },

  // 报名状态可能更新 需要这里维护
  onShow() {
    if (!this.mId) return;
    this.init()
  },

  methods: {
    async init() {
      uni.showLoading({
        title: "加载中",
      });
      try {
        const response = await getMettingDetailApi(this.mId);
        console.log(response, "---");
        const { tbMeetingInfo } = response;
        this.detail = tbMeetingInfo;
        this.list.splice(0, 1, this.getImgUrl(tbMeetingInfo.tmi_icon));
      } catch (error) {}
      uni.hideLoading();
    },

    async tabChangeHandler(e) {
      this.tabIndex = e.index;
      if (e.index === 1) {
        // 获取论坛列表
        this.getForumList();
      } else if (e.index === 2) {
        this.getMettingDetailPerson();
      } else if (e.index === 0) {
        this.getScheduleInfo();
      } else if (e.index === 3) {
        this.getMeetingNews();
      }
    },

    async getMeetingNews() {
      if (this.newsList.length > 0) return;
      uni.showLoading({ title: "加载中..." });
      try {
        const res = await getMeetingNewsApi({
          tmn_meeting_id: this.mId,
        });
        // console.log(res);
        this.newsList = res.list;
      } catch (error) {}
      uni.hideLoading();
    },

    async getForumList() {
      if (this.forumList.length > 0) return;
      uni.showLoading({ title: "加载中..." });
      const forumList = await getForumListApi({
        tmf_meeting_id: this.mId, // 只传会议id
      }).finally(uni.hideLoading);
      console.log(forumList);
      this.forumList = forumList;
    },

    async getMettingDetailPerson() {
      if (this.guestList.length > 0) return;
      uni.showLoading({ title: "加载中" });
      const guestList = await getMettingDetailPersonApi({
        meeting_id: this.mId,
        page: 1,
        pageSize: 100,
      }).finally(uni.hideLoading);
      this.guestList = guestList;
    },

    async getScheduleInfo() {
      const response = await getScheduleInfoApi({
        tsi_head_id: this.mId,
        tsi_type: 1,
      });
      this.scheduleInfo = response.list || [];
    },
  },
};
</script>

<style lang="scss" scoped>
.text-card {
  .btn {
    background: rgba(#481ec1, 0.1);
    border-radius: 28rpx;
    padding: 8rpx 32rpx;
    flex-shrink: 0;
  }
}

.news-box {
  // padding-left: 40rpx;
}
</style>
